<!-- 编辑冻结时长 -->
<template>
  <div>
    <a-modal
      :title="$t('Edit')+$t('Freeze-duration')"
      v-model="modalVisible"
      width='30%'
      @ok="handleSubmit"
      @cancel="handleCancel"
      :maskClosable="false"
      v-dragModal
    >
      <a-form :form="form">
        <a-form-item :label="$t('Frozen-time')" v-bind="formLayout">
          <a-input 
            v-decorator="['time',{
              rules:[
                {pattern:/^([1-9]|[1-9][0-9]|1[0-6][0-8]|168)$/,message:$t('Only-enter-int-max')}
              ],initialValue: targetUser.lock_duration
            }]"
            :addon-after="$t('Hour')" 
          >
          </a-input>
        </a-form-item>
      </a-form>
      <template slot="footer">
        <a-button @click="handleCancel" class="submit-btn">
          {{$t('Cancel')}}
        </a-button>
        <a-button
          class="submit-btn"
          type="primary"
          @click="handleSubmit"
          :loading="submitLoading"
        >
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "FrozenOperate",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    targetUser: {
      type: Object,
      required: true,
      default: () => { return {} }
    }
  },

  data() {
    return {
      modalVisible: false,
      form: this.$form.createForm(this),
      formLayout:{
        labelCol: {span: 6},
        wrapperCol: {span: 17}
      },
      submitLoading: false,
    }
  },

  watch: {
    visible(newValue) {
      this.modalVisible = newValue;
    }
  },

  methods: {
    // 编辑冻结时长
    handleSubmit() {
      this.form.validateFields(async (err,value)=>{
        if(!err){
          this.submitLoading = true;
          const params = {
            id: this.targetUser.id,
            lock_duration: value.time,
            sources_name: this.targetUser.sources_name,
            user_type:this.targetUser.user_type
          }
          const res = await this.$api.userManage.editFrozenTimeRequest(params)
          if(res && res.data) {
            if(res.data.flag == 0) {
              this.$emit('updateData');
            }
            this.model(res.data.id) //返回模板
            this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
          }
          this.handleCancel();
          this.submitLoading = false;
        }
      })
    },

    //关闭弹窗
    handleCancel() {
      this.form.resetFields();
      this.$emit('closeOperateModal', 'frozen');
    },
  },
}
</script>
<style scoped>
  .submit-btn {
    width: 70px;
  }
</style>